<template>
	<view class="flex flex-column">
		<u-sticky>
			<view class=" bg-white border-top pt-1">
				<view class="px-2">
					<u-input v-model="form.keyword" border placeholder="请输入商品名称关键词" />
				</view>
				<view>
					<u-dropdown class="u-dropdown" active-color="#e87722">
						<u-dropdown-item v-model="form.brand" title="品牌" @change="changeBrand">
							<view class="slot-content" style="background-color: #FFFFFF;">
								<scroll-view scroll-y="true" style="height: 200rpx;">
									<view class="item-box">
										<view class="item" :class="[item.active ? 'active' : '']" @tap="tagClick(index)"
											v-for="(item, index) in options1" :key="index">
											{{item.label}}
										</view>
									</view>
								</scroll-view>
								<view class="flex align-center justify-around">
									<div class="text-center py-1 rounded-circle bge87722cc text-white fs-28" style="width: 200rpx;"
										@click="searchSubmit">筛选</div>
									<div class="text-center py-1 rounded-circle border ft666666 fs-28" style="width: 200rpx;"
										@click="searchSubmit">重置</div>
								</view>
							</view>
						</u-dropdown-item>
						<u-dropdown-item v-model="form.goods_classify_id" title="分类" :options="options2"
							@change="changeClass"></u-dropdown-item>
						<u-dropdown-item v-model="form.audit_status" title="审核" :options="options3"
							@change="changeAudit"></u-dropdown-item>
						<u-dropdown-item v-model="form.shop_status" title="上下架" :options="options4"
							@change="changeStatus"></u-dropdown-item>
					</u-dropdown>
				</view>
			</view>
		</u-sticky>



		<view class="rounded-lg p-2 bg-white flex align-center mx-2 mt-2 boxshadow" v-for="(item,index) in goodsList"
			:key="index">
			<image class="rounded bgf7f7f7" :src="item.main_image" mode="aspectFill" style="width: 150rpx;height: 150rpx;"
				@click="navTo(`/pages/store/storeGoods?id=${item.id}`)">
			</image>
			<view class="flex-1 flex flex-column ml-2">
				<view class="fs-32 font-weight-bold" @click="navTo(`/pages/store/storeGoods?id=${item.id}`)">{{item.goods_name}}
				</view>
				<view class="fs-24 ft666666 my-1" @click="navTo(`/pages/store/storeGoods?id=${item.id}`)">
					日租：¥{{item.day_amount}}/天 押金：¥{{item.deposit_amount}}
				</view>
				<view class="flex align-center fs-24">
					<text class="status1 status-tag mr-4 " v-if="item.shop_status === 2">已上架</text>
					<text class="status2 status-tag mr-4" v-if="item.audit_status === 1">审核中</text>
					<text class="status3 status-tag mr-4" v-if="item.shop_status === 1 && item.audit_status === 2">已下架</text>
					<!-- <view class="mx-4 flex align-center" @click="navTo(`/pages/store/storeGoods?id=${item.id}`)">
						<u-icon name="edit-pen" color="#2d8cf0" size="30"></u-icon>
						<text class="ft2d8cf0">编辑</text>
					</view> -->
					<view class="flex align-center mr-4" v-if="item.shop_status === 2" @click="updateGoods(item,'1')">
						<u-icon name="arrow-downward" color="#f40b0b" size="30"></u-icon>
						<text class="ftf40b0b">下架</text>
					</view>
					<view class="flex align-center mr-4" v-if="item.shop_status === 1 && item.audit_status === 2"
						@click="updateGoods(item,'2')">
						<u-icon name="reload" color="#16a34a" size="30"></u-icon>
						<text class="ft16a34a">重新上架</text>
					</view>
				</view>
			</view>
		</view>

		<view
			class="flex flex-column text-white fs-24 position-fixed right-0 bottom-0 bge87722 rounded-circle justify-center  align-center mb-5 mr-1"
			style="width: 60px;height: 60px;" @click="navTo('/pages/store/createGoods')">
			<u-icon name="plus" size="30"></u-icon>
			<text class="">创建商品</text>
		</view>
	</view>
</template>

<script>
	import config from "@/config/api.js";
	import {
		storeGoodsList,
		goodsUpdate
	} from "@/api/store.js";
	export default {
		data() {
			return {
				config,
				form: {
					keyword: '',
					brand: '',
					goods_classify_id: '',
					audit_status: '',
					shop_status: ''
				},
				options1: [{
						label: '品牌1',
						value: 1,
						active: false
					},
					{
						label: '品牌2',
						value: 2,
						active: false
					},
					{
						label: '品牌3',
						value: 3,
						active: false
					}
				],
				options2: [{
						label: '分类1',
						value: 1,
					},
					{
						label: '分类2',
						value: 2,
					},
				],
				options3: [{
						label: '待审核',
						value: 1,
					},
					{
						label: '审核通过',
						value: 2,
					},
					{
						label: '审核拒绝',
						value: 3,
					},
				],
				options4: [{
						label: '下架',
						value: 1,
					},
					{
						label: '上架',
						value: 2,
					},
				],
				page: 1,
				tempList: [],
				goodsList: []
			}
		},
		onReachBottom() {
			if (this.tempList.length < 20) return
			this.page++
			this.storeGoodsList()
		},
		onShow() {
			this.storeGoodsList()
		},
		methods: {
			updateGoods(item, type) {
				uni.showLoading({
					title: '',
					mask: false
				});
				goodsUpdate({
					...item,
					id: item.id,
					shop_status: type
				}).then(res => {

					uni.hideLoading()
					this.page = 1
					this.storeGoodsList()
				})
			},
			changeBrand(val) {
				this.page = 1
				this.storeGoodsList()
			},
			changeClass(val) {
				this.page = 1
				this.storeGoodsList()
			},
			changeAudit(val) {
				this.page = 1
				this.storeGoodsList()
			},
			changeStatus(val) {
				this.page = 1
				this.storeGoodsList()
			},
			storeGoodsList() {
				const data = {
					page: 1,
					limit: 20,
					...this.form
				}
				Object.keys(data).forEach(key => {
					if (!data[key]) delete data[key]
				})
				storeGoodsList(data).then(res => {
					this.tempList = res.data.data.list
					if (this.page === 1) {
						this.goodsList = this.tempList
					} else {
						this.goodsList = this.goodsList.concat(this.tempList)
					}
				})
			},
			tagClick(index) {
				this.options1[index].active = !this.options1[index].active;
			},
			searchSubmit() {

			},
			navTo(url) {
				uni.navigateTo({
					url
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.status-tag {
		font-size: 12px;
		padding: 2px 10px;
		border-radius: 12px;
		font-weight: 500;
	}

	.status1 {
		background-color: #f6ffed;
		border: 1px solid #b7eb8f;
		color: #52c41a;
	}

	.status2 {
		background-color: #fff7e6;
		border: 1px solid #ffd591;
		color: #fa8c16;
	}

	.status3 {
		background-color: #fff1f0;
		border: 1px solid #ffa39e;
		color: #f5222d;
	}

	.slot-content {
		background-color: #FFFFFF;
		padding: 24rpx;

		.item-box {
			margin-bottom: 50rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			.item {
				border: 1px solid #999;
				color: #666;
				padding: 8rpx 40rpx;
				border-radius: 100rpx;
				margin-top: 30rpx;
			}

			.active {
				color: #FFFFFF;
				border: 1px solid #e87722;
				background-color: #e87722;
			}
		}
	}
</style>